<template>
  <div class="container">
    <div class="is-size-4 ml-3 my-4 has-text-weight-bold">
      试卷库
      <div class="primary-color is-size-4">——</div>
    </div>

    <span class="mx-3">科目</span>
    <el-select
      v-model="subjectId"
      class="mb-5"
      placeholder="请选择科目"
      @change="getPaperListBySubject"
    >
      <el-option
        v-for="item in subjectList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>

    <!-- 表格 -->
    <el-table
      class="ml-4"
      border
      stripe
      :data="paperListData"
      style="width: 95%"
    >
      <el-table-column prop="id" label="试卷编号" width="90" />
      <el-table-column prop="name" label="试卷名称" width="380" />
      <el-table-column prop="score" label="满分" width="80" />
      <el-table-column prop="gradeLevel" label="年级" width="80" />
      <el-table-column
        prop="createTime"
        :formatter="dateFormat"
        label="创建日期"
        width="180"
      />
      <el-table-column prop="suggestTime" label="时间要求(分钟)" />

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="small"
            icon="el-icon-edit"
            round
            @click="handleCheck(scope.row)"
          >查看</el-button>
          <el-button
            size="small"
            type="danger"
            plain
            round
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
const commonApi = require('@/api/common')
const paperApi = require('@/api/paper')
const dayjs = require('dayjs')

export default {
  data() {
    return {
      subjectList: [],
      subjectId: '',
      paperListData: []
    }
  },
  mounted() {
    commonApi.getSubjectList().then(res => {
      console.log('subjcet loaded')
      this.subjectList = res.data
      this.subjectId = res.data[0].id
      this.getPaperListBySubject()
    })
  },
  methods: {
    dateFormat(row, column, cellValue, index) {
      console.log(cellValue)
      if (cellValue) {
        return dayjs(cellValue).format('YYYY-MM-DD HH:mm')
      } else {
        return '-'
      }
    },

    getPaperListBySubject() {
      console.log('getPaperListBySubject')
      paperApi.getPaperListBySubject(this.subjectId).then(res => {
        this.paperListData = res.data.data
        console.log(res.data)
      })
    },
    handleCheck(rowData) {
      localStorage.setItem('paperCache', JSON.stringify(rowData))
      this.$router.push({
        name: 'paperDetail',
        params: {
          paperId: rowData.id
        }
      })
    },
    handleDelete(rowData) {
      this.$confirm('删除该试卷, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('delete paper id: ', rowData.id)
        paperApi.deletePaper(rowData.id).then(res => {
          this.$message({
            type: 'success',
            message: res.msg
          })
          this.getPaperListBySubject()
        })
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  margin-bottom: 100px;
}

.btn {
  font-size: 17px;
  margin-bottom: 15px;
  width: 100%;
  height: 65px;
  text-align: left;
}
</style>
